<template>
    <div id="container">
      <div id="viewDiv"></div>
    </div>
    <div style="position:absolute;width:180px;height:30px;" :style="{top:top,left:left,visibility:visibility}" >
      <el-select v-model="select"  placeholder="请根据名称选择要素" tag-type="success" @change="change">
        <el-option v-for="item in options" :value="item" :label="item" :key="item"></el-option>
      </el-select>
    </div>
</template>

<script setup>
/*整体思路
  1:创建一个草图工具对象和一个图形图层对象并建立关联,草图工具对象用于执行对图形图层中的图形的删除操作,图形图形对象用来存放
选中的要素的图形的副本
  2:通过视图对象的点击事件获取点击到的图形(或图形的集合),如果点击到了特定要素图层的要素,克隆这个要素并存放到图形图层
  3:将这个克隆的要素符号设置为透明并启用编辑,启用编辑的目的是使其高亮显示同时激活编辑
  4:草图工具对象的delete事件的回调函数中,执行相应方法,删除要素图层中objectid字段的值跟删除的图形对象的objectid字
段的值一致的要素
*/
import  * as 天地图 from '../天地图'
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
var map,view,要素图层,sketchViewModel,graphicsLayer
const select=ref()
const options=ref([])
const top=ref()
const left=ref()
const visibility=ref("hidden")
var change=()=>{}
var 重置=()=>{
  select.value=null;options.value=[];top.value=null;left.value=null;visibility.value="hidden";
  graphicsLayer.graphics.removeAll()
}
onMounted(()=>{
  要素图层 = new FeatureLayer({//创建要素图层
    url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
    //核心属性:"objectid","name","address","一级类","二级类"
    title:"AOI图层",
    outFields:["*"],
    renderer:{
      type:"simple",
      symbol:{
        type:"simple-fill",
        color:[0,0,0,0.2],
        outline:{
          color:[255,255,255,0.8],
          width:0.5
        }
      }
    }
  })
  graphicsLayer=new GraphicsLayer()//创建图形图层
  map=new Map({//创建地图对象
    basemap:{
      baseLayers:天地图.天地图矢量
    },
    layers: [要素图层,graphicsLayer]//引入要素图层和图形图层
  })
  view = new MapView({
    map: map,  container: "viewDiv",
    scale:5000, center: [120.4, 36.1],
    constraints:{
        minScale:500000,
        maxScale:1800,
        rotationEnabled:false
    }
  })
  view.ui.remove(["zoom","attribution"])
  view.on("click", function(event) {//视图对象click事件的回调函数
    view.hitTest(event).then(function(response) {//判断是否点击到了有效的元素
      重置()
      var graphics=response?.results.map((item)=>{//获取点击到的要素图层的图形的集合
        if(item.type==="graphic" && item.graphic.layer===要素图层){
          return item.graphic
        }
      })
      var graphics_view=response?.results.map((item)=>{//获取点击到的graphicsLayer图层的图形的集合
        if(item.type==="graphic" && item.graphic.layer===graphicsLayer){
         return item.graphic
        }
      })
      if(!graphics_view[0] && graphics[0]){//如果没有点击到graphicsLayer图层的图形且点击到了要素图层的图形则执行以下代码
        if(graphics.length>1){//判断是否点击到了要素图层的多个图形
          var point=view.toScreen(event.mapPoint)
          top.value=point.y-30+'px'
          left.value=point.x+10+'px'
          visibility.value="visible"
          for(let item of graphics){
            options.value.push(item.attributes.name)
          }
          change=()=>{
            visibility.value="hidden"
            for(let item of graphics){
              if(select.value===item.attributes.name){
                var graphic={
                  symbol:{//设置符号为完全透明
                    type:'simple-fill',
                    color:[115,223,255,0],
                    outline:{
                        color:[0,0,0,0],
                        width:0
                    }
                  },
                  geometry:item.geometry,
                  attributes:item.attributes
                }
              graphicsLayer.graphics.add(graphic)
              sketchViewModel.update(graphicsLayer.graphics.items[0],{mode:"move"})
              }
            }
          }
        }else{//仅点击到了一个要素图层的图形,克隆这个要素的几何和属性并添加到graphicsLayer图层中
          var graphic={
            symbol:{//设置符号为完全透明
              type:'simple-fill',
              color:[115,223,255,0],
              outline:{
                  color:[0,0,0,0],
                  width:0
              }
            },
            geometry:graphics[0].geometry,
            attributes:graphics[0].attributes
          }
          graphicsLayer.graphics.add(graphic)
          sketchViewModel.update(graphicsLayer.graphics.items[0],{tool:"move"})//然后立即启用编辑,目的是为了高亮显示同时启用编辑
          //开始更新该图形,目的是高亮该图形
        }
      }
    })
  })
  sketchViewModel=new SketchViewModel({//创建草图工具对象
    view:view,
    layer:graphicsLayer,
    defaultUpdateOptions:{//设置禁用更新工具的旋转和缩放功能
      enableRotation:false,
      enableScaling:false
    },
  })
  sketchViewModel.on("delete",(event)=>{//草图工具对象delete事件的回调函数
    var objectid=event.graphics[0].attributes.objectid//获取删除的图形的objectid属性的值
    要素图层.applyEdits({
      deleteFeatures:[{
          objectId:objectid//注意:objectId属性并非要素的属性,而是一个固定的属性,表示要素oid字段的值
      }]
    })
  })
})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}
</style>
  